<script>
import {reactive, shallowReactive, ref, shallowRef, readonly, onMounted} from "vue";
import Son from "@/components/son.vue";

export default {
  name: "App",
  components: {Son},
  setup(props, context) {
    // 创建一个reactive类型的对象
    let person = reactive({
      name: "陶品奇",
      age: 22,
      address: "衡阳",
      children: {
        child1: "马云",
        child2: "马化腾"
      }
    })
    //使用readonly将person包裹
    //可以接三个类型的参数:普通的对象\ref对象\reactive对象
    let readonlyPerson = readonly(person)

    return {person, readonlyPerson}
  }
}
</script>
<template>
  <div id="app">
    <son :person="person" :readonlyPerson="readonlyPerson"></son>
  </div>
</template>

<style lang="less">

</style>
